<template>
	<view class="my-modal-verify">
		<my-modal title="权利人" :value="showPopup" width="700" @input="onInput" @confirm="onConfirm">
			<view class="form-box">
				<uni-forms ref="form" :modelValue="form" :rules="rules" label-position="top">
					<view class="form-item" v-for="item in dynamicLists" :key="item.id">
						<view class="form-item-wrap">
							<view class="form-item-wrap-input">
								<uni-forms-item required label="姓名" :name="'name' + item.id" :rules="rules.name.rules">
									<uni-easyinput type="text" v-model="form['name' + item.id]" placeholder="请输入姓名" />
								</uni-forms-item>
							</view>
							<view class="form-item-wrap-input">
								<uni-forms-item required label="身份证号" :name="'idCard' + item.id" :rules="rules.idCard.rules">
									<uni-easyinput type="idcard" v-model="form['idCard' + item.id]" placeholder="请输入身份证号" />
								</uni-forms-item>
							</view>
						</view>
						<view class="u-m-t-24"><u-icon name="minus-circle" color="#fa3534" size="40" @click="onDel(item.id)"></u-icon></view>
					</view>
				</uni-forms>
			</view>
			<u-button type="success" :custom-style="customStyle" plain size="medium" slot="left" @click="onAdd">添加</u-button>
		</my-modal>
	</view>
</template>

<script>
export default {
	name: 'my-modal-verify',
	props: {
		value: {
			type: Boolean,
			default: false
		}
	},
	watch: {
		value: {
			handler(nVal) {
				this.showPopup = nVal;
			},
			immediate: true
		}
	},
	data() {
		return {
			showPopup: false,
			customStyle: {
				padding: '0 40rpx'
			},
			form: {
				name: '',
				idCard: ''
			},
			rules: {
				name: {
					rules: [
						{
							required: true,
							errorMessage: '请输入姓名'
						}
					]
				},
				idCard: {
					rules: [
						{
							required: true,
							errorMessage: '请输入身份证号'
						},
						{
							pattern: '/(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)/',
							errorMessage: '请输入正确身份证'
						}
					]
				}
			},
			dynamicLists: [
				{
					id: 1
				}
			]
		};
	},
	mounted() {
		// this.$refs.form.setRules(this.rules);
	},
	methods: {
		onInput(val) {
			this.showPopup = val;
			this.$emit('input', val);
			if (!val) {
				this.$refs.form.clearValidate();
			} else {
				this.$nextTick(() => {
					this.$refs.form.setRules(this.rules);
				});
			}
		},
		onConfirm() {
			this.$refs.form
				.validate()
				.then(res => {
					console.log('表单数据信息：', res);
					this.$emit('confirm', this.form);
				})
				.catch(err => {
					console.log('表单错误信息：', err);
				});
		},
		onAdd() {
			this.$refs.form
				.validate()
				.then(res => {
					this.dynamicLists.push({
						id: Date.now()
					});
				})
				.catch(err => {
					console.log('表单错误信息：', err);
				});
		},
		onDel(id) {
			let index = this.dynamicLists.findIndex(v => v.id === id);
			this.dynamicLists.splice(index, 1);
		}
	}
};
</script>

<style lang="scss" scoped>
.form-box {
	padding: $uni-spacing-row-lg;

	.form-item {
		display: flex;
		align-items: center;

		&-wrap {
			flex: 1;
			display: flex;
			align-items: center;
			margin-right: $uni-spacing-row-lg;

			&-input {
				flex: 1;

				& + .form-item-wrap-input {
					margin-left: $uni-spacing-row-lg;
				}
			}
		}
	}
}
</style>
